<template>
  <div class="restart-history-container">
    <!-- 页面标题和统计卡片 -->
    <div class="page-header">
      <div class="header-background">
        <div class="bg-pattern"></div>
        <div class="bg-gradient"></div>
      </div>
      
      <div class="page-title">
        <div class="title-with-back">
          <el-button 
            type="primary" 
            :icon="ArrowLeft" 
            @click="$router.push('/jobs')"
            class="blue-return-button"
            circle
          />
          <div class="title-icon">
            <div class="icon-container" style="width: 36px; height: 36px; background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%); border-radius: 8px; color: white; box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);">
              <el-icon size="20"><Refresh /></el-icon>
              <div class="icon-glow"></div>
            </div>
          </div>
          <div class="title-content">
            <div class="title-main">
              <h1>重启历史</h1>
              <div class="title-badge">
                <el-icon><Clock /></el-icon>
                <span>History</span>
              </div>
            </div>
            <p class="page-description">
              <el-icon><Monitor /></el-icon>
              查看 Flink 集群节点和作业的重启历史记录
            </p>
            <div class="title-meta">
              <div class="meta-item">
                <el-icon><Refresh /></el-icon>
                <span>重启记录</span>
              </div>
              <div class="meta-item">
                <el-icon><Clock /></el-icon>
                <span>时间追踪</span>
              </div>
              <div class="meta-item">
                <el-icon><DataAnalysis /></el-icon>
                <span>状态监控</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="page-stats">
        <div class="stat-card total">
          <div class="stat-icon">
            <el-icon><Menu /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ totalAll || total }}</div>
            <div class="stat-label">总数</div>
            <div class="stat-trend">
              <el-icon><Menu /></el-icon>
              <span>全部</span>
            </div>
          </div>
        </div>
        
        <div class="stat-card running">
          <div class="stat-icon">
            <el-icon><Check /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ stats.success || 0 }}</div>
            <div class="stat-label">成功</div>
            <div class="stat-trend">
              <el-icon><Check /></el-icon>
              <span>已完成</span>
            </div>
          </div>
        </div>
        
        <div class="stat-card failed">
          <div class="stat-icon">
            <el-icon><Close /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ stats.failed || 0 }}</div>
            <div class="stat-label">失败</div>
            <div class="stat-trend">
              <el-icon><Close /></el-icon>
              <span>异常</span>
            </div>
          </div>
        </div>
        
        <div class="stat-card finished">
          <div class="stat-icon">
            <el-icon><Loading /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ stats.attempting || 0 }}</div>
            <div class="stat-label">进行中</div>
            <div class="stat-trend">
              <el-icon><Loading /></el-icon>
              <span>执行中</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 搜索和筛选区域 -->
    <div class="search-section">
      <el-card shadow="hover" class="search-card">
        <template #header>
          <div class="search-header">
            <div class="search-title">
              <el-icon><Search /></el-icon>
              <span>搜索与筛选</span>
            </div>
          </div>
        </template>
        <el-form :model="searchForm" class="search-form">
          <div class="search-form-content">
            <div class="search-form-fields">
              <el-form-item label="重启类型">
                <el-select 
                  v-model="searchForm.restart_type" 
                  placeholder="全部" 
                  clearable 
                  style="width: 140px"
                >
                  <el-option label="全部" value="" />
                  <el-option label="作业 (JOB)" value="JOB" />
                  <el-option label="服务 (SERVICE)" value="SERVICE" />
                </el-select>
              </el-form-item>
              
              <el-form-item label="作业名称" v-if="!searchForm.restart_type || searchForm.restart_type === 'JOB'">
                <el-input
                  v-model="searchForm.job_name"
                  placeholder="请输入作业名称"
                  clearable
                  style="width: 200px"
                />
              </el-form-item>
              
              <el-form-item label="操作类型">
                <el-select 
                  v-model="searchForm.action" 
                  placeholder="全部" 
                  clearable 
                  style="width: 140px"
                >
                  <el-option label="全部" value="" />
                  <el-option label="重启 (RESTART)" value="RESTART" />
                  <el-option label="启动 (START)" value="START" />
                  <el-option label="停止 (STOP)" value="STOP" />
                  <el-option label="恢复 (RECOVER)" value="RECOVER" />
                </el-select>
              </el-form-item>
              
              <el-form-item label="状态">
                <el-select 
                  v-model="searchForm.status" 
                  placeholder="全部" 
                  clearable 
                  style="width: 140px"
                >
                  <el-option label="全部" value="" />
                  <el-option label="进行中 (ATTEMPTING)" value="ATTEMPTING" />
                  <el-option label="成功 (SUCCESS)" value="SUCCESS" />
                  <el-option label="失败 (FAILED)" value="FAILED" />
                </el-select>
              </el-form-item>
            </div>
            
            <div class="search-form-actions">
              <el-button 
                type="info" 
                @click="advancedSearchExpanded = !advancedSearchExpanded" 
                plain
              >
                <el-icon>
                  <component :is="advancedSearchExpanded ? 'ArrowUp' : 'ArrowDown'" />
                </el-icon>
                高级筛选
              </el-button>
              <el-button type="primary" @click="handleSearch" class="search-btn">
                <el-icon><Search /></el-icon>
                搜索
              </el-button>
              <el-button type="warning" @click="handleReset" class="reset-btn">
                <el-icon><Refresh /></el-icon>
                重置
              </el-button>
            </div>
          </div>
          
          <!-- 高级筛选折叠区域 -->
          <transition name="advanced-filter">
            <div v-show="advancedSearchExpanded" class="advanced-filter-section">
              <div class="advanced-filter-fields">
                <el-form-item label="时间范围">
                  <el-date-picker
                    v-model="dateRange"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    :shortcuts="dateShortcuts"
                    format="YYYY-MM-DD HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    style="width: 400px"
                    :teleported="true"
                    popper-class="datetime-picker-popper"
                    :clearable="true"
                  />
                </el-form-item>
              </div>
            </div>
          </transition>
        </el-form>
      </el-card>
    </div>

    <!-- 数据表格 -->
    <div class="table-section" v-loading="loading">
      <el-card shadow="hover" class="table-card">
        <template #header>
          <div class="table-header">
            <div class="table-title">
              <el-icon><List /></el-icon>
              <span>重启历史列表</span>
              <el-tag v-if="total > 0" type="info" size="small">{{ total }} 条</el-tag>
            </div>
            <div class="table-header-actions">
              <el-button 
                type="success"
                size="small" 
                :icon="Refresh" 
                @click="loadHistory"
                :loading="loading"
                class="refresh-btn"
              >
                刷新
              </el-button>
              <div class="table-info">
                <!-- 分页折叠控制 -->
                <div class="pagination-control-wrapper" @click="paginationExpanded = !paginationExpanded">
                  <span class="page-count">本页 {{ historyList.length }} 条</span>
                  <div class="divider"></div>
                  <span class="pagination-info">{{ currentPage }}/{{ Math.ceil(total / pageSize) || 1 }}</span>
                  <el-icon class="pagination-icon" :class="{ 'expanded': paginationExpanded }">
                    <ArrowDown />
                  </el-icon>
                </div>
              </div>
            </div>
          </div>
        </template>

        <div class="table-container">
          <el-table
            :data="historyList"
            class="enhanced-table"
            style="width: 100%"
            :height="600"
            :default-sort="{ prop: 'created_time', order: 'descending' }"
            @sort-change="handleSortChange"
            table-layout="fixed"
          >
            <el-table-column
              prop="restart_type"
              label="重启类型"
              width="120"
            >
              <template #default="{ row }">
                <el-tag size="small" :type="row.restart_type === 'JOB' ? 'success' : 'primary'">
                  {{ row.restart_type === 'JOB' ? '作业' : '服务' }}
                </el-tag>
              </template>
            </el-table-column>
            
            <!-- JOB 类型专用列 -->
            <el-table-column
              v-if="!searchForm.restart_type || searchForm.restart_type === 'JOB'"
              prop="job_name"
              label="作业名称"
              min-width="280"
              show-overflow-tooltip
            />
            
            <el-table-column
              v-if="!searchForm.restart_type || searchForm.restart_type === 'JOB'"
              prop="job_id"
              label="作业ID"
              min-width="220"
              show-overflow-tooltip
            />
            
            <!-- SERVICE 类型专用列 -->
            <el-table-column
              v-if="!searchForm.restart_type || searchForm.restart_type === 'SERVICE'"
              prop="host"
              label="主机名"
              min-width="150"
              show-overflow-tooltip
            />
            
            <el-table-column
              v-if="!searchForm.restart_type || searchForm.restart_type === 'SERVICE'"
              prop="service_type"
              label="服务类型"
              width="120"
            >
              <template #default="{ row }">
                <el-tag size="small" type="info">{{ row.service_type || '-' }}</el-tag>
              </template>
            </el-table-column>
            
            <el-table-column
              prop="action"
              label="操作类型"
              width="120"
            >
              <template #default="{ row }">
                <el-tag size="small" :type="getActionTagType(row.action)">
                  {{ getActionLabel(row.action) }}
                </el-tag>
              </template>
            </el-table-column>
            
            <el-table-column
              prop="status"
              label="状态"
              width="100"
            >
              <template #default="{ row }">
                <el-tag 
                  size="small" 
                  :type="getStatusTagType(row.status)"
                >
                  {{ getStatusLabel(row.status) }}
                </el-tag>
              </template>
            </el-table-column>
            
            <el-table-column
              prop="created_time"
              label="开始时间"
              width="180"
              sortable="custom"
            />
            
            <el-table-column
              prop="completed_time"
              label="完成时间"
              width="180"
              sortable="custom"
            >
              <template #default="{ row }">
                {{ row.completed_time || '-' }}
              </template>
            </el-table-column>
            
            <el-table-column
              prop="duration_seconds"
              label="耗时(秒)"
              width="140"
              sortable="custom"
            >
              <template #default="{ row }">
                {{ row.duration_seconds !== null && row.duration_seconds !== undefined ? row.duration_seconds : '-' }}
              </template>
            </el-table-column>
            
            <el-table-column
              prop="original_failure_reason"
              label="原始失败原因"
              min-width="200"
              show-overflow-tooltip
            >
              <template #default="{ row }">
                {{ row.original_failure_reason || '-' }}
              </template>
            </el-table-column>
            
            <el-table-column
              prop="error_message"
              label="错误消息"
              min-width="200"
              show-overflow-tooltip
            >
              <template #default="{ row }">
                {{ row.error_message || '-' }}
              </template>
            </el-table-column>
            
            <el-table-column
              label="操作"
              width="120"
              fixed="right"
            >
              <template #default="{ row }">
                <div class="action-buttons">
                  <el-tooltip content="查看详情" placement="top">
                    <el-button
                      type="primary"
                      size="small"
                      @click="handleViewDetail(row)"
                      circle
                    >
                      <el-icon><View /></el-icon>
                    </el-button>
                  </el-tooltip>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        
        <!-- 分页折叠区域 -->
        <transition name="pagination-slide">
          <div v-show="paginationExpanded" class="pagination-section">
            <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :total="total"
              :page-sizes="[10, 20, 50, 100]"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handlePageChange"
              background
            />
          </div>
        </transition>
      </el-card>
    </div>

    <!-- 详情对话框 -->
    <DetailDialog
      v-model="showDetailDialog"
      :history-data="currentHistory"
    />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'
import {
  Refresh, Search, List, ArrowLeft, ArrowDown, ArrowUp, Menu, Check, Close, Loading,
  Monitor, Clock, View
} from '@element-plus/icons-vue'
import api from '@/utils/api'
import { createLogger } from '@/utils/logger'
import DetailDialog from './components/DetailDialog.vue'

const componentLogger = createLogger('RestartHistory')

// 数据状态
const historyList = ref([])
const loading = ref(false)
const total = ref(0)
const totalAll = ref(0)
const currentPage = ref(1)
const pageSize = ref(20)
const stats = ref({
  success: 0,
  failed: 0,
  attempting: 0
})

// 搜索表单
const searchForm = reactive({
  restart_type: '',
  job_name: '',
  action: '',
  status: ''
})

// 时间范围
const dateRange = ref(null)

// 高级筛选折叠状态
const advancedSearchExpanded = ref(false)

// 日期快捷选项
const dateShortcuts = [
  {
    text: '最近1小时',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setHours(start.getHours() - 1)
      return [start, end]
    }
  },
  {
    text: '最近6小时',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setHours(start.getHours() - 6)
      return [start, end]
    }
  },
  {
    text: '今天',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setHours(0, 0, 0, 0)
      return [start, end]
    }
  },
  {
    text: '昨天',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setDate(start.getDate() - 1)
      start.setHours(0, 0, 0, 0)
      end.setDate(end.getDate() - 1)
      end.setHours(23, 59, 59, 999)
      return [start, end]
    }
  },
  {
    text: '最近7天',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setDate(start.getDate() - 7)
      return [start, end]
    }
  }
]

// 设置默认时间范围：今天0点到当前时刻
const setDefaultTimeRange = () => {
  const now = new Date()
  const startOfToday = new Date()
  startOfToday.setHours(0, 0, 0, 0)
  
  // 格式化为 YYYY-MM-DD HH:mm:ss
  const formatDateTime = (date) => {
    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    const hours = String(date.getHours()).padStart(2, '0')
    const minutes = String(date.getMinutes()).padStart(2, '0')
    const seconds = String(date.getSeconds()).padStart(2, '0')
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
  }
  
  dateRange.value = [formatDateTime(startOfToday), formatDateTime(now)]
}

// 排序
const sortField = ref('created_time')
const sortOrder = ref('desc')

// 对话框
const showDetailDialog = ref(false)
const currentHistory = ref(null)

// 分页折叠状态
const paginationExpanded = ref(false)

// 加载历史列表
const loadHistory = async () => {
  try {
    loading.value = true
    const params = {
      page: currentPage.value,
      size: pageSize.value,
      sort: sortField.value,
      order: sortOrder.value,
      ...searchForm
    }
    
    // 处理时间范围
    if (dateRange.value && dateRange.value.length === 2) {
      params.start_time = dateRange.value[0]
      params.end_time = dateRange.value[1]
    }

    // 清理空值
    Object.keys(params).forEach(key => {
      if (params[key] === '' || params[key] === null || params[key] === undefined) {
        delete params[key]
      }
    })

    const response = await api.get('/restart-history', { params })
    const result = response.data

    if (result.success) {
      const data = result.data
      historyList.value = data.rows || []
      total.value = data.total || 0
      totalAll.value = data.total_all || 0
      stats.value = data.stats || { success: 0, failed: 0, attempting: 0 }
      
      componentLogger.info('重启历史列表加载成功', { total: total.value })
    } else {
      throw new Error(result.message || '加载失败')
    }
  } catch (error) {
    componentLogger.error('加载重启历史列表失败', error)
    ElMessage.error('加载重启历史列表失败')
  } finally {
    loading.value = false
  }
}

// 搜索
const handleSearch = () => {
  currentPage.value = 1
  loadHistory()
}

// 重置
const handleReset = () => {
  Object.assign(searchForm, {
    restart_type: '',
    job_name: '',
    action: '',
    status: ''
  })
  setDefaultTimeRange()
  advancedSearchExpanded.value = false
  currentPage.value = 1
  sortField.value = 'created_time'
  sortOrder.value = 'desc'
  loadHistory()
}

// 分页
const handlePageChange = (page) => {
  currentPage.value = page
  loadHistory()
}

const handleSizeChange = (size) => {
  pageSize.value = size
  currentPage.value = 1
  loadHistory()
}

// 排序（只允许开始时间、结束时间、耗时排序）
const handleSortChange = ({ prop, order }) => {
  // 只允许这三个字段排序
  const allowedSortFields = ['created_time', 'completed_time', 'duration_seconds']
  
  if (prop && order && allowedSortFields.includes(prop)) {
    sortField.value = prop
    sortOrder.value = order === 'ascending' ? 'asc' : 'desc'
    loadHistory()
  } else if (!prop || !order) {
    // 清除排序时，恢复默认排序
    sortField.value = 'created_time'
    sortOrder.value = 'desc'
    loadHistory()
  }
  // 如果是不允许排序的字段，不做任何处理
}

// 查看详情
const handleViewDetail = (row) => {
  currentHistory.value = { ...row }
  showDetailDialog.value = true
}

// 获取操作类型标签样式
const getActionTagType = (action) => {
  const typeMap = {
    'RESTART': 'warning',
    'START': 'success',
    'STOP': 'danger',
    'RECOVER': 'primary'
  }
  return typeMap[action] || ''
}

// 获取操作类型标签文本
const getActionLabel = (action) => {
  const labelMap = {
    'RESTART': '重启',
    'START': '启动',
    'STOP': '停止',
    'RECOVER': '恢复'
  }
  return labelMap[action] || action
}

// 获取状态标签样式
const getStatusTagType = (status) => {
  const typeMap = {
    'SUCCESS': 'success',
    'FAILED': 'danger',
    'ATTEMPTING': 'warning'
  }
  return typeMap[status] || ''
}

// 获取状态标签文本
const getStatusLabel = (status) => {
  const labelMap = {
    'SUCCESS': '成功',
    'FAILED': '失败',
    'ATTEMPTING': '进行中'
  }
  return labelMap[status] || status
}

// 初始化
onMounted(() => {
  setDefaultTimeRange()
  loadHistory()
})
</script>

<style scoped>
.restart-history-container {
  padding: 0;
  background: var(--el-bg-color-page);
  min-height: 100vh;
}

/* 页面头部 */
.page-header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 20px 24px;
  border-radius: 12px;
  overflow: hidden;
  color: #303133;
  min-height: 120px;
  border: 1px solid #e4e7ed;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 返回按钮样式 */
.title-with-back {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.blue-return-button {
  background: linear-gradient(135deg, #409eff 0%, #66b3ff 100%);
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
  transition: all 0.3s ease;
  flex-shrink: 0;
  margin-top: 2px;
}

.blue-return-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(64, 158, 255, 0.4);
  background: linear-gradient(135deg, #66b3ff 0%, #409eff 100%);
}

.header-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

.bg-gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  opacity: 1;
}

.bg-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 20% 80%, rgba(64, 158, 255, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(64, 158, 255, 0.05) 0%, transparent 50%);
  animation: patternMove 30s ease-in-out infinite;
}

@keyframes patternMove {
  0%, 100% { transform: translateX(0) translateY(0); }
  25% { transform: translateX(-10px) translateY(-5px); }
  50% { transform: translateX(5px) translateY(-10px); }
  75% { transform: translateX(-5px) translateY(5px); }
}

.page-title {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 24px;
  flex: 1;
}

.title-icon {
  position: relative;
}

.icon-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-glow {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background: inherit;
  filter: blur(8px);
  opacity: 0.5;
  z-index: -1;
}

.title-content {
  flex: 1;
}

.title-main {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

.title-main h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  letter-spacing: -0.3px;
}

.title-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.page-description {
  margin: 0 0 12px 0;
  color: #606266;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 8px;
}

.title-meta {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #909399;
  font-size: 13px;
}

.meta-item .el-icon {
  font-size: 14px;
}

/* 统计卡片 */
.page-stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.stat-card {
  flex: 1;
  min-width: 120px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  border: 1px solid #e4e7ed;
  cursor: pointer;
  position: relative;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: #409eff;
}

.stat-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.stat-card.total .stat-icon {
  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
  color: white;
}

.stat-card.running .stat-icon {
  background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
  color: white;
}

.stat-card.failed .stat-icon {
  background: linear-gradient(135deg, #f56c6c 0%, #f78989 100%);
  color: white;
}

.stat-card.finished .stat-icon {
  background: linear-gradient(135deg, #e6a23c 0%, #ebb563 100%);
  color: white;
}

.stat-content {
  flex: 1;
}

.stat-number {
  font-size: 20px;
  font-weight: 700;
  color: #303133;
  line-height: 1.2;
}

.stat-label {
  font-size: 12px;
  color: #606266;
  margin-top: 2px;
}

.stat-trend {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-size: 10px;
  color: #909399;
}

/* 搜索区域 */
.search-section {
  margin-bottom: 24px;
}

.search-card {
  border-radius: 12px;
  border: 1px solid #e4e7ed;
}

.search-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.search-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.search-title .el-icon {
  color: #409eff;
}

.search-form {
  margin-top: 0;
}

.search-form-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.search-form-fields {
  display: flex;
  gap: 16px;
  flex: 1;
  flex-wrap: wrap;
}

.search-form-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

/* 搜索按钮和重置按钮的图标颜色 */
.search-btn .el-icon {
  color: #fff;
}

.reset-btn .el-icon {
  color: #fff;
}

/* 表格区域 */
.table-section {
  margin-bottom: 24px;
}

.table-card {
  border-radius: 12px;
  border: 1px solid #e4e7ed;
}

.table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.table-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.table-title .el-icon {
  color: #409eff;
}

.table-header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.table-info {
  display: flex;
  align-items: center;
}

.pagination-control-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: rgba(64, 158, 255, 0.08);
  border: 1px solid rgba(64, 158, 255, 0.2);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  font-size: 12px;
  height: 24px;
}

.pagination-control-wrapper:hover {
  background: rgba(64, 158, 255, 0.12);
  border-color: rgba(64, 158, 255, 0.3);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.15);
}

.page-count {
  font-size: 12px;
  font-weight: 500;
  color: #909399;
  line-height: 1;
}

.divider {
  width: 1px;
  height: 12px;
  background: rgba(64, 158, 255, 0.3);
  margin: 0 2px;
}

.pagination-info {
  font-size: 12px;
  font-weight: 500;
  color: #409eff;
  letter-spacing: 0.5px;
  min-width: 24px;
  text-align: center;
  line-height: 1;
}

.pagination-icon {
  font-size: 12px;
  color: #409eff;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pagination-icon.expanded {
  transform: rotate(180deg);
}

.table-container {
  margin-bottom: 16px;
}

.pagination-section {
  padding: 16px;
  border-top: 1px solid #f0f0f0;
  background: #fafafa;
}

.pagination-section .el-pagination {
  display: flex;
  justify-content: center;
}

/* 分页折叠动画 */
.pagination-slide-enter-active,
.pagination-slide-leave-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pagination-slide-enter-from,
.pagination-slide-leave-to {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}

/* 刷新按钮样式 */
.refresh-btn {
  background: linear-gradient(135deg, #67C23A 0%, #85CE61 100%);
  border: none;
  border-radius: 8px;
  color: #fff;
  box-shadow: 0 4px 12px rgba(103, 194, 58, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 500;
}

.refresh-btn:hover {
  background: linear-gradient(135deg, #85CE61 0%, #67C23A 100%);
  box-shadow: 0 6px 20px rgba(103, 194, 58, 0.4);
  transform: translateY(-2px);
  color: #fff;
}

/* 高级筛选样式 */
.advanced-filter-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e4e7ed;
}

.advanced-filter-fields {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.advanced-filter-fields .el-form-item {
  margin-bottom: 0;
}

/* 高级筛选折叠动画 */
.advanced-filter-enter-active,
.advanced-filter-leave-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.advanced-filter-enter-from,
.advanced-filter-leave-to {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  padding-top: 0;
}

.advanced-filter-enter-to,
.advanced-filter-leave-from {
  max-height: 200px;
  opacity: 1;
  margin-top: 16px;
  padding-top: 16px;
}

/* 操作按钮样式 */
.action-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  white-space: nowrap;
  justify-content: flex-start;
  align-items: center;
  min-width: 100px;
}

.action-buttons .el-button {
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.action-buttons .el-button:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.action-buttons .el-button:active {
  transform: translateY(0) scale(0.98);
}

.action-buttons .el-button--primary {
  background: linear-gradient(135deg, #409EFF 0%, #66B3FF 100%);
  border: none;
}

.action-buttons .el-button--primary:hover {
  background: linear-gradient(135deg, #66B3FF 0%, #409EFF 100%);
}
</style>

